When using Xamarin Forms sometimes we have a control in our XAML that changes according to the value of a property in our model. For example, if we have a Label which property Text has a binding to a string property that represents a Name in a model that we want to be visible only if isn’t empty.

A quick way to solve it is to add a new bool property in the model to validate if the name has a value or not. Then set this property as the Binding to property IsVisible of the Label.

But why to add this UI logic to our model?  It should be handled in the XAML instead.

There are better ways to do it, one is by using Triggers, which basically allows you to change property values of a control based on events or property changes.

In Xamarin Forms there are 4 types of triggers:

• Property Triggers
• Data trigger (more commonly used in my case)
• Event Triggers
• Multi triggers

Let’s see it one by one

Property Triggers

The property triggers are used when you want to change a property of the control according to a specific value of another property.

For example, if we want to change the background color and scale of the entry when the text matches a specific string:

All the controls have a property called Triggers in which you can specify the property to evaluate with a specific value and the properties that will be changed when the trigger activate once the value match occurs.

Copy XAML here.

As you can see in the image above I can only use properties of the same control.

Data Triggers

Are similar to the property triggers except that instead of a property we specify a binding property. This allow us to set binding between control properties or ViewModel/Model properties.

Binding between controls

Allows you to do binding between controls properties. For example, in the image above the second Entry is enabled only if the first Entry has text.

Copy XAML here.

Binding with a property in the ViewModel/Model

You can set binding to any property, so if we go back to the first example about hiding the Label if text is empty. If we do it with a data trigger would be something like this:

Copy XAML here.

Event Triggers

It activates when an event of the control occurs. For example, if we want to change a property when a button is clicked (Using the event Clicked) or when the text change (Using the event TextChanged).

In this example we will add a scale animation when a button is tapped.

You just have to:

1-Create a class that extends from TriggerAction < Your Control type > and override Invoke method, inside it modify the properties of the control you want when the trigger activates.

In my case I’m adding a Scale animation.  Copy code here

2-Add the trigger to your control, specifying the event that will raise it on the Event property and add your custom trigger action class inside it.

Copy XAML here

Multi Triggers

Same as DataTrigger but it allows you to validate combining multiple conditions.

For example, if we want to enable a button according to the entries matching with a specific username and password.

The code is really simple you just have to add the MultiTrigger to your Button.

Copy XAML here.

And that’s all for now!

Happy coding!

References

• https://docs.microsoft.com/es-es/xamarin/xamarin-forms/app-fundamentals/triggers